<template>
  <el-dialog title="选择属性组" :visible.sync="showPropertyGroup" class="el-dialog-edit" :close-on-click-modal="false">
    <el-form label-position="left" label-width="100px" style="width: 100%; padding-left: 20px;">
      <el-form-item label="所选属性组：">
        <div class="el-tag-box">
          <el-tag v-for="(goods, index) of currentCheck" :key="goods.id" :closable="true" @close="delGoods(index)">{{goods.name}}</el-tag>
        </div>
      </el-form-item>
    </el-form>
    <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="120px" style="width: 100%">
      <input type="text" style="display: none" />
      <!--form input placeholder-->
      <el-row :gutter="50">
        <el-col :xs="24">
          <el-form-item label="属性组名称：" prop="nameLike">
            <el-input @keyup.enter.native="search" v-model="listQuery.nameLike" placeholder="按属性组名称搜索" maxlength="50" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label class="btn-item">
        <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
        <span class="btn-reset" @click="resetForm()">清空搜索条件</span>
      </el-form-item>
    </el-form>
    <el-table :data="list" ref="elTable" v-loading="listLoading" :highlight-current-row="single" element-loading-text="给我一点时间" border
      @select-all="handleSelectAll" @row-click="clickRow" @select="(s,r)=>{clickRow(r)}">
      <el-table-column v-if="!single" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="属性组名称" width="110">
        <template slot-scope="scope">
          <div class="text-justify">
            <p v-text="scope.row.name"></p>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="属性组描述" min-width="110">
        <template slot-scope="scope">
          <span>{{scope.row.description}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex" :page-size="listQuery.pageSize" background
      layout="total, prev, pager, next, jumper" style="text-align: center" :total="listTotal"></el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="btnDisabled" @click="submit">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getAttrGroup } from '@/api/goodMiddleStage'
export default {
  name: 'chooseCat',
  props: {
    // 单选 or 多选
    single: {
      type: Boolean,
      default: true
    },
    // 默认选中项
    check: {
      type: Array,
      default() {
        return []
      }
    },
    // 最大选择数
    maxCount: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      currentCheck: [],
      list: [],
      listQuery: {
        nameLike: '',
        pageIndex: 1,
        pageSize: 8,
        backCatId: '',
        queryType: 3
      },
      backCatTree: [],
      showPropertyGroup: true,
      listTotal: 0,
      listLoading: false,
      btnDisabled: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const { data } = await getAttrGroup(this.listQuery)
        console.log(data)
        this.list = data.data
        this.listLoading = false
        this.listTotal = data.total
      } catch (error) {
        console.log(error)
        this.listLoading = false
      }
    },
    // 获取当前默认选中值的下标
    getCurrentCheckIdx() {
      let idx = -1
      if (this.single && this.check[0]) {
        idx = this.findIndex(this.check[0], this.list)
      } else if (this.check.length > 0) {
        this.check.forEach(it => {
          idx = this.findIndex(it, this.list)
        })
      }
      if (idx !== -1) {
        this.setCurrentCheck(this.list[idx])
      }
    },
    findIndex(val, list) {
      return list.findIndex(it => it.id === val.id)
    },
    // 设置当前默认选中项
    setCurrentCheck(val) {
      if (this.single) {
        this.currentCheck = [val]
        this.$refs.elTable.setCurrentRow(val)
      } else {
        this.currentCheck.push(val)
        this.$refs.elTable.toggleRowSelection(val)
      }
    },
    // 单击行
    clickRow(row) {
      if (this.single) {
        this.currentCheck = [row]
        this.$refs.elTable.setCurrentRow(row)
      } else {
        const idx = this.findIndex(row, this.currentCheck)
        if (idx === -1) {
          this.currentCheck.push(row)
          this.$refs.elTable.toggleRowSelection(row, true)
        } else {
          this.currentCheck.splice(idx, 1)
          this.$refs.elTable.toggleRowSelection(row, false)
        }
      }
    },
    // 多选状况下 ，处理全选按钮
    handleSelectAll(select) {
      const listLen = this.list.length
      const currentCheckLen = this.currentCheck.length
      // 当有选中项且个数小于总数， 就全部选中
      if (currentCheckLen > 0 && currentCheckLen !== listLen) {
        this.currentCheck = this.list
      } else if (currentCheckLen === 0) {
        this.currentCheck = this.list
      } else if (currentCheckLen === listLen) {
        this.currentCheck = []
      }
    },
    // 通过tag删除
    delGoods(index) {
      const val = this.currentCheck.splice(index, 1)[0]
      console.log('s删除', this.currentCheck)
      if (this.single) {
        this.$refs.elTable.setCurrentRow()
      } else {
        this.$refs.elTable.toggleRowSelection(val, false)
      }
    },
    // 选择商品
    submit() {
      if (this.currentCheck.length > this.maxCount && this.maxCount !== -1) {
        return this.$message.error(`最多选择${this.count}个商品`)
      }
      this.$emit('choose', this.currentCheck)
      this.close()
    },
    // 关闭弹窗
    close() {
      this.showPropertyGroup = false
      document.body.removeChild(this.$el)
    },
    // 搜索
    search() {
      this.listQuery.pageIndex = 1
      this.getList()
    },
    resetForm() {
      this.$refs['searchForm'].resetFields()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageIndex = page
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ tr.current-row > td {
  background: #c9d7e6;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #c9d7e6;
}
</style>
